<template>
	<div class="app-container">
		<div class="downStream2">
			<div class="down-top">
				<el-steps :active="2" finish-status="end" process-status='curt' class="nextnav" simple>
					<el-step title="导入文件" icon="iconfont icon-1"></el-step>
					<el-step title="保单校验" icon="iconfont icon-2"></el-step>
					<el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
			</div>
			<div class="down-lot">
				<el-button size='mini' @click='openDialog'>批量修改</el-button>
				<el-dialog title="批量修改" :visible.sync="dialogShow" width='500px' :close-on-click-modal='false' center>
					<div class="uploadBox">
						<div class="box1">
							<span>第一步：</span>
							<span>导出数据报表，根据需求进行修改；</span>
							<el-button size='mini' @click='exportSettle' :loading="daoloading">导出</el-button>
						</div>
						<div class="box2">
							<span>第二步：</span>
							<span>导出修改后的报表；</span>
							<el-upload class="upload-demo upload1" :action="upurl" :headers="headers" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" accept="excel/xls,excel/xlsx" :on-success='handleSuccess' :on-error='errorUP' :before-upload="beforeAvatarUpload" :on-exceed="handleExceed" :file-list="fileList">
								<el-button size="mini"><i class='el-icon-upload'></i> 点击上传</el-button>
								<div slot="tip" class="el-upload__tip">支持格式：xlsx、xls</div>
							</el-upload>
							<span class="upSapn1">文件上传成功后，所上传的结算保单默认为允许结算，</span>
							<span class="upSapn1">其他设置为暂不结算，可以根据自己的需要再做修改！</span>
						</div>
						<div class="box3">
							<span>第三步：</span>

							<span>批量修改完成；</span>
						</div>
					</div>
					<div class="box4">
						<el-button size='mini' type='primary' class='upBtn' @click='uploadBtn' :loading='okloading'>确定</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="down-list">
				<div class="list-tab">
					<div class="tab" v-bind:class="{'now': now == 1}" @click='changeTab(1)'>全部<span>（{{count}}条）</span></div>
					<div class="tab" v-bind:class="{'now': now == 2}" @click='changeTab(2)'>可以结算保单<span>（{{salesmanCount}}条）</span></div>
					<div class="tab" v-bind:class="{'now': now == 3}" @click='changeTab(3)'>暂不结算保单<span>（{{notSalesmanCount}}条）</span></div>
				</div>
				<div class="list-all2" clearfix>
					<div class="all-data2">
						<span>政策金额：<span>{{premium | numFilter}}</span>元，实结合计：<span v-bind:class="{'data-red': premium != actionPremium}">{{actionPremium | numFilter
								}}</span>元</span>&nbsp;
					</div>
				</div>
				<div class="list-table">
					<el-table :data="tableData" style="width: 100%" :stripe='true' @expand-change='toggleRowExpansion' v-loading='loading' element-loading-background="rgba(255, 255, 255, 0.3)">
						<el-table-column type="expand">
							<template slot-scope="props">
								<div  v-if='props.row.expandData'>
									<div class="item-content clearfix">
										<div class="lf">
											<p class="title1">保单匹配政策</p>
											<p><span class="firstSpan">政策批次：</span>
												<span class='lineS' v-if='props.row.expandData.policys && props.row.expandData.policys.batchName' @click='toD(props.row.expandData.policys.batchId)'>{{props.row.expandData.policys.batchName}} <i class="iconfont icon-zhuanfa"></i></span>

												<el-tooltip v-else-if="props.row.insuranceId && props.row.staffId" placement="bottom-start" effect="light">
													<div slot="content">查看下游更多政策</div>
													<router-link class="all alls" tag="a" target="_blank" :to="{ name: 'policydown', query: { insuranceId: props.row.insuranceId, staffId:props.row.staffId , time:new Date().getTime()}}">未匹配到政策
													</router-link>
												</el-tooltip>

												<span v-else>-</span>
												<!-- <router-link  v-else class="all alls" tag="a" target="_blank" :to="{ name: 'policyup', query: { insuranceId: expandData.policys.InsuranceId, staffId:expandData.policys.StaffId , time:new Date().getTime()}}">未匹配到政策
												</router-link> -->
											</p>
											<p><span class="firstSpan">工&emsp;&emsp;号：</span>
												<span v-if='props.row.expandData.policys && props.row.expandData.policys.staffs.length != 0'>
													<span v-for='item in props.row.expandData.policys.staffs'>{{item.staffAccount}}({{item.describe}})</span></span>
												<span v-else-if="props.row.staffAccount">{{props.row.staffAccount}}({{props.row.describe}})</span>
												<span v-else>-</span>
											</p>
											<div class="divP"><span class="firstSpan">有&ensp;效&ensp;期：</span>
												<span v-if='!props.row.expandData.policys || (!props.row.expandData.policys.effectiveDate &&  !props.row.expandData.policys.expiryDate)'>-</span>
												<div class="setWd" v-else>
													<span v-if='props.row.expandData.policys && props.row.expandData.policys.effectiveDate'>{{props.row.expandData.policys.effectiveDate | TenCon}}</span>
													<span v-if='!props.row.expandData.policys || !props.row.expandData.policys.effectiveDate'>-</span>
													到
													<span v-if='props.row.expandData.policys && props.row.expandData.policys.expiryDate'>{{props.row.expandData.policys.expiryDate | TenCon}}</span>
													<span v-if='props.row.expandData.policys && !props.row.expandData.policys.expiryDate'>不限</span>
													<span v-if='!props.row.expandData.policys'>-</span>
												</div>
											</div>
											<div class="divP"><span class="firstSpan">匹配政策：</span>
												<div class='setWd'>
													<span v-if='props.row.expandData.policys && props.row.expandData.policys.remark' class="lineS" @click='toR(props.row.expandData.policys.batchId,props.row.expandData.policys.policyId)'>{{props.row.expandData.policys.serialNumber&&props.row.expandData.policys.serialNumber>10?props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;':'0'+props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;'}}{{props.row.expandData.policys.remark}} <i class="iconfont icon-zhuanfa"></i></span>
													<span v-else>-</span>
												</div>
											</div>
											<div class="divP"><span class="firstSpan">附加奖励：</span>
												<div class="setWd">
													<span v-if='props.row.expandData.policys && props.row.expandData.policys.policyRewards.length != 0'>
														<span v-for='item in props.row.expandData.policys.policyRewards' class='lineS' @click='toA(item.policyBatchId)'><span class="noDou">,</span>{{item.policyBatchName}} <i class="iconfont icon-zhuanfa"></i></span>
													</span>
													<span v-else>-</span>
												</div>
											</div>
										</div>
										<div class="md">
											<p class="title1">政策预估费用</p>
											<p><span class="firstSpan">保单手续费比例：</span><span v-if="props.row.expandData.chargeRatio=='-'&&props.row.expandData.chargeBrokerageRation=='-'&&props.row.expandData.chargeRewardRatio=='-'">-</span><span v-else>
													<el-tooltip placement="top" effect="light">
														<div slot="content">
															<div>佣金：{{props.row.expandData.chargeBrokerageRation | percentFilter}}</div>
															<div>奖励：{{props.row.expandData.chargeRewardRatio | percentFilter}}</div>
														</div>
														<span style="color:#151515;cursor:pointer;display:inline;">{{props.row.expandData.chargeRatio | percentFilter}}</span>
													</el-tooltip>
												</span>
											</p>
											<p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.charge == '-'">-</span><span v-else>{{props.row.expandData.charge | numFilter}} 元</span></p>
											<p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.vehicleAndVesselTaxRatio | percentFilter}}</span></p>
											<p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.vehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.vehicleAndVesselTax | numFilter}} 元</span></p>
											<p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.additionalRewardRatio | percentFilter}}</span></p>
											<p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.additionalReward == '-'">-</span><span v-else>{{props.row.expandData.additionalReward | numFilter}} 元</span></p>
										</div>
										<div class="rh">
											<p class="title1">下游实结费用</p>
											<p><span class="firstSpan">保单手续费比例：</span><span>{{props.row.expandData.actionChargeRatio | percentFilter}}</span></p>
											<p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.actionCharge == '-'">-</span><span v-else>{{props.row.expandData.actionCharge | numFilter}} 元</span></p>
											<p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.actionVehicleAndVesselTaxRatio | percentFilter}}</span></p>
											<p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.actionVehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.actionVehicleAndVesselTax | numFilter}} 元</span></p>
											<p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.actionAdditionalRewardRatio | percentFilter}}</span></p>
											<p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.actionAdditionalReward == '-'">-</span><span v-else>{{props.row.expandData.actionAdditionalReward | numFilter}} 元</span></p>
										</div>

									</div>

								
									<div class="item-content clearfix aniss" v-if="props.row.isShowM">

										<div style="overflow: hidden;">
											<!-- {{baodanDetaill}} -->

											<div class="lf">
												<p class="title1">保单信息</p>
												<p><span class="firstSpan">签单日期：</span>

													<span v-if="props.row.cheMsg.signDate">{{props.row.cheMsg.signDate}}</span>
													<span v-else>-</span>

												</p>
												<p><span class="firstSpan">起保日期：</span>
													<span v-if="props.row.cheMsg.beginDate ">{{props.row.cheMsg.beginDate }}</span>
													<span v-else>-</span>
												</p>
												<div class="divP"><span class="firstSpan">交商同保：</span>
													<span v-if="props.row.cheMsg.mutualInsurance  ">{{props.row.cheMsg.mutualInsurance }}</span>
													<span v-else>-</span>
												</div>

											</div>
											<div class="md" style="border:none;">
												<p class="title1">&nbsp;</p>
												<p><span class="firstSpan" style="width:95px;">核保日期：</span>
													<span v-if="props.row.cheMsg.confirmDate   ">{{props.row.cheMsg.confirmDate }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan" style="width:95px;">到期日期：</span>
													<span v-if="props.row.cheMsg.expirationDate    ">{{props.row.cheMsg.expirationDate }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan" style="width:95px;">上年出险次数：</span>
													<span v-if="props.row.cheMsg.dangerTimes     ">{{props.row.cheMsg.dangerTimes }}</span>
													<span v-else>-</span>
												</p>

											</div>
											<div class="rh rh2">
												<p class="title1">&nbsp;</p>
												<p><span class="firstSpan">支付日期：</span>
													<span v-if="props.row.cheMsg.paymentDate     ">{{props.row.cheMsg.paymentDate }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">业务类型：</span>
													<span v-if="props.row.cheMsg.businessType     ">{{props.row.cheMsg.businessType }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">上年违章次数：</span>
													<span v-if="props.row.cheMsg.peccancyTimes     ">{{props.row.cheMsg.peccancyTimes }}</span>
													<span v-else>-</span>
												</p>

											</div>

										</div>
										<div style="overflow: hidden;">
											<!-- {{baodanDetaill}} -->

											<div class="lf">
												<p class="title1">车辆信息</p>
												<p><span class="firstSpan ">车辆种类：</span>
													<span v-if="props.row.cheMsg.vehicleType      ">{{props.row.cheMsg.vehicleType }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan ">号牌底色：</span>
													<span v-if="props.row.cheMsg.plateColor      ">{{props.row.cheMsg.plateColor }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan ">发动机号：</span>
													<span v-if="props.row.cheMsg.engineNumber      ">{{props.row.cheMsg.engineNumber }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan ">座&emsp;&emsp;位：</span>
													<span v-if="props.row.cheMsg.seatCount      ">{{props.row.cheMsg.seatCount }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan ">是否新车：</span>
													<span v-if="props.row.cheMsg.isNew      ">{{props.row.cheMsg.isNew }}</span>
													<span v-else>-</span>
												</p>

											</div>
											<div class="md" style="border:none;">
												<p class="title1">&nbsp;</p>
												<p><span class="firstSpan fi">采&ensp;购&ensp;价：</span>
													<span v-if="props.row.cheMsg.purchasePrice      ">{{props.row.cheMsg.purchasePrice | numFilter }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan fi">核载质量：</span>
													<span v-if="props.row.cheMsg.loadQuality      ">{{props.row.cheMsg.loadQuality }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan fi">整备质量：</span>
													<span v-if="props.row.cheMsg.curbQuality      ">{{props.row.cheMsg.curbQuality }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan fi">功&emsp;&emsp;率：</span>
													<span v-if="props.row.cheMsg.power      ">{{props.row.cheMsg.power }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan fi">排&emsp;&emsp;量：</span>
													<span v-if="props.row.cheMsg.displacement      ">{{props.row.cheMsg.displacement }}</span>
													<span v-else>-</span>
												</p>

											</div>
											<div class="rh rh2">
												<p class="title1">&nbsp;</p>
												<p><span class="firstSpan">厂牌型号：</span>
													<span  class="changpai" v-if="props.row.cheMsg.brandModel" :title="props.row.cheMsg.brandModel">{{props.row.cheMsg.brandModel }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">是否过户车：</span>
													<span v-if="props.row.cheMsg.isTransfer      ">{{props.row.cheMsg.isTransfer }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">所属性质：</span>
													<span v-if="props.row.cheMsg.belongNature      ">{{props.row.cheMsg.belongNature }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">使用性质：</span>
													<span v-if="props.row.cheMsg.useNature      ">{{props.row.cheMsg.useNature }}</span>
													<span v-else>-</span>
												</p>
												<p><span class="firstSpan">初登日期：</span>
													<span v-if="props.row.cheMsg.initialDate      ">{{props.row.cheMsg.initialDate | times }}</span>
													<span v-else>-</span>
												</p>

											</div>

										</div>

									</div>
                  	<div class="item-content clearfix" style="padding:10px 0;">
                      <a class="links" v-if="!props.row.isShowM" @click="getMore(props.row)">查看更多 <i  class="iconfont icon-bottom"></i></a>
                      <a class="links" v-else @click="getMore(props.row)">收起 <i class="iconfont icon-up"></i></a>
                    </div>
								</div>

								<div class="item-content clearfix" v-else style='text-align:center'>加载中...</div>
							</template>
						</el-table-column>
						<el-table-column width='55'>
							<template slot-scope='scope'>
								<span v-if="scope.row.insuranceType == 1" class="edspan1">商</span>
								<span v-if="scope.row.insuranceType == 2" class="edspan2">交</span>
							</template>
						</el-table-column>
						<el-table-column label='保单信息'>
							<template slot-scope='scope'>
								<p class="info-p1 clearfix">
									<span class="lineG" @click='toG(scope.row.guaranteeSlipId)' v-if='scope.row.guaranteeSlipNumber' :title='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
									<span v-if='!scope.row.guaranteeSlipNumber'>-</span>
									
								</p>
								<p class="info-p2">
									<el-tooltip v-if='scope.row.insuranceName' placement="bottom-start" effect="light">
										<div slot="content">{{scope.row.staffAccount}}({{scope.row.describe}})</div>
										<span style="vertical-align:top;">{{scope.row.insuranceName}}</span>
									</el-tooltip>
									<span v-if='!scope.row.insuranceName'>-</span>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span v-if='scope.row.plateNumber'>{{scope.row.plateNumber}}</span>
									<span v-else>-</span>
									<!-- <template v-if="scope.row.customerName!== null">
										<el-tooltip v-if='scope.row.customerName.length >6' class="item" effect="dark" :content="scope.row.customerName" placement="bottom">
											<span style="cursor: pointer;">{{scope.row.customerName | sixCon}}</span>
										</el-tooltip>
										<span v-if='scope.row.customerName.length <6'>{{scope.row.customerName | sixCon}}</span>
									</template>

									<span v-if='!scope.row.customerName'>-</span> -->
								</p>
							</template>
						</el-table-column>
						<el-table-column label="业务归属" width='160'>
							<template slot-scope='scope'>
								<p class="info-p1" v-if='scope.row.salesman'>{{scope.row.salesman}}</p>
								<p class="info-p1" v-if='!scope.row.salesman'>-</p>
								<el-tooltip placement="bottom-start" effect="light">
									<div slot="content">{{scope.row.organizationUnitName}}</div>
									<p class="info-p2" v-if='scope.row.organizationUnitName'>{{scope.row.organizationUnitName | lastname}}</p>
								</el-tooltip>
								<p class="info-p2" v-if='!scope.row.organizationUnitName'>-</p>
							</template>
						</el-table-column>
						<el-table-column :render-header='fee' width='150' align='right'>
							<template slot-scope='scope'>
								<p class="info-p3">
									<span v-if='scope.row.gVehicleAndVesselTax != 0'>{{scope.row.gVehicleAndVesselTax | numFilter}}</span>
									<span v-if='scope.row.gVehicleAndVesselTax == 0'>0.00</span>
									<span v-if='scope.row.gVehicleAndVesselTax == null'>-</span>
									<span v-if='scope.row.totalPremium != 0'>&nbsp;/&nbsp;{{scope.row.totalPremium | numFilter}}</span>
									<span v-if='scope.row.totalPremium == 0'>&nbsp;/&nbsp;0.00</span>
									<span v-if='scope.row.totalPremium == null'>&nbsp;/&nbsp;-</span>
								</p>
								<p class="info-p1" v-if='scope.row.totalNetPremium != 0'>{{scope.row.totalNetPremium | numFilter}}</p>
								<p class="info-p1" v-if='scope.row.totalNetPremium == 0'>0.00</p>
								<p class="info-p1" v-if='scope.row.totalNetPremium == null'>-</p>
							</template>
						</el-table-column>
						<el-table-column label="政策费用" width='120' align='right'>
							<template slot-scope='scope'>
								<span class='setFont' v-if='scope.row.total != 0'>{{scope.row.total | numFilter}}</span>
								<span class='setFont' v-if='scope.row.total == 0'>0.00</span>
								<span class='setFont' v-if='scope.row.total == null'>-</span>
							</template>
						</el-table-column>
						<el-table-column label="实结费用" width='120' align='right'>
							<template slot-scope='scope'>
								<span class='setFont' v-if='scope.row.actionTotal != 0' v-bind:class="{'setR':scope.row.actionTotal != scope.row.total}">{{scope.row.actionTotal | numFilter}}</span>
								<span class='setFont' v-if='scope.row.actionTotal == 0' v-bind:class="{'setR':scope.row.actionTotal != scope.row.total}">0.00</span>
								<span class='setFont' v-if='scope.row.actionTotal == null'>-</span>
							</template>
						</el-table-column>
						<el-table-column label="是否结算" width='80' align='right'>
							<template slot-scope='scope'>
								<span v-if='scope.row.lowerSettleState == 1' style="color:#CF1322;">已结算</span>
								<el-tooltip v-else :content="scope.row.isSettlement? '可以结算':'暂不结算'" placement="top">
									<el-switch v-model="scope.row.isSettlement" active-color="#87D068" inactive-color="#CCCCCC" @change='switchtoggle(scope.row.id)'>
									</el-switch>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" width='80' align='right'>
							<template slot-scope='scope'>
								<a class="remark" v-if='scope.row.lowerSettleState == 1'></a>
								<a class="remark" v-else @click='toEdit(scope.row)'>编辑</a>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="list-page">
					<el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next,jumper" :total="pagetotal"></el-pagination>
				</div>
			</div>
			<div class="down-btn">
				<el-button size='small' class='wd100' @click='toupstep()'>上一步</el-button>
				<el-button size='small' type='primary' class='wd100' @click='tosettle()' v-if='btnShow'>结算</el-button>
				<el-dialog title="确认" :visible.sync="dialogVisible" width='500px' :close-on-click-modal='false'>
					<p style="text-align: left;margin-top:0;">请确认以下结算信息是否正确：</p>
					<table class="settletable" border="1" cellpadding="6" cellspacing="0"  v-loading='dialogLoading'>
						<tr>
							<td width="25%"></td>
							<td width="25%">条数</td>
							<td width="25%">政策金额</td>
							<td width="25%">实结金额</td>
						</tr>
						<tr>
							<td style="text-align:left;">共搜索保单</td>
							<td>{{settleTableData.totalCount}}</td>
							<td>{{settleTableData.exportTotalCost | numFilter}}</td>
							<td>{{settleTableData.exportATotalCost | numFilter}}</td>
						</tr>
						<tr class="setB">
							<td style="text-align:left;">本次结算保单</td>
							<td>{{settleTableData.salesmanCount}}</td>
							<td>{{settleTableData.salesmanTotalCost | numFilter}}</td>
							<td>{{settleTableData.salesmanATotalCost | numFilter}}</td>
						</tr>
						<tr>
							<td style="text-align:left;">暂未结算保单</td>
							<td>{{settleTableData.notSalesmanCount}}</td>
							<td>{{settleTableData.notSalesmanTotalCost | numFilter}}</td>
							<td>{{settleTableData.notSalesmanActionTotalCost | numFilter}}</td>
						</tr>
					</table>
					<div>
						<el-button size='mini' class='wd130' @click='dialogVisible = false'>暂不结算</el-button>
						<el-button size='mini' type='primary' class='wd130' @click='upsettle()' :loading="isokLoading">正确，马上结算</el-button>
					</div>
				</el-dialog>
			</div>
			<layer :isShow='isshow' :title="title" :datas="datas" :types="2" :save="tosave" :closeLayer="closeLayer" :quit='closeLayer'></layer>
		</div>
	</div>
</template>
<script>
import Vue from "vue";
import layer from "./../layer/index";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      now: 1,
      tableData: [],
      currentPage: 1,
      pagetotal: null,
      queryType: 0,
      isloading: false,
      daoloading: false,
      // 得到行的id
      getRowKeys(row) {
        return row.guaranteeSlipId;
      },
      expands: [], // 要展开的行，数值的元素是row的key值
      expandData: null,
      dialogVisible: false,
      settleTableData: {},
      isshow: false,
      title: "实结手续费修改",
      datas: {},
      pagetotal: 0,
      count: 0,
      salesmanCount: 0,
      notSalesmanCount: 0,
      premium: 0,
      actionPremium: 0,
      btnShow: true,
      loading: false,
      dialogShow: false, //导出导入
      fileList: [],
      upurl: process.env.BASE_DOWN + "/api/services/UploadFileLowerSettlements",
      okloading: false,
      expandLoading: false,
      dialogLoading: false,
      isokLoading: false
    };
  },
  components: {
    layer
  },
  computed: {
    headers() {
      return {
        Authorization: "Bearer " + getToken()
      };
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.signBeginDate = this.$route.query.signBeginDate;
      this.signEndDate = this.$route.query.signEndDate;
      this.organizationUnitId = this.$route.query.organizationUnitId;
      this.salesman = this.$route.query.salesman;
      this.staffId = this.$route.query.staffId;
      this.insuranceType = this.$route.query.insuranceType;
      this.insuranceId = this.$route.query.insuranceId;
    }
    // }else{
    // 	this.id = '5e564282-3138-4ee6-9a1b-be58e8c96032'
    // }
    this.getList();
    // this.getDetail();
  },
  filters: {
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    },
    percentFilter(val) {
      if (val && val != "-") {
        console.log(val);
        val = parseFloat(val.substring(0, val.length - 1));
        val = val.toFixed(2);
        return val + " %";
      } else {
        return "-";
      }
    },
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    sixCon(val) {
      let aa = val;
      if (val.length > 6) {
        aa = val.substr(0, 6) + "...";
      }
      return aa;
    },
    TenCon(val) {
      let aa = val;
      if (val.length > 16) {
        aa = val.substr(0, 16);
      }
      return aa;
    }
  },
  methods: {
    getMore(val) {
      console.log("getMore");
      console.log(val);

      if (val.isShowM) {
        Vue.set(val, "isShowM", false);
      } else {
        Vue.set(val, "isShowM", true);
      }
    },
    errorUP() {
      this.$message.error("上传失败");
    },
    // 切换之后操作
    toggleRowExpansion(row) {
      if (this.expands[0] != row.guaranteeSlipId) {
        this.expands = [];
        this.expands.push(row.guaranteeSlipId);
        console.log(row);
        this.getDetail(row);
        this.getDandetail(row);
      } else {
        this.expands = [];
      }
    },
    getDandetail(val) {
      console.log(val);
      console.log("getDandetail");

      let params = {
        id: val.guaranteeSlipId
      };
      this.post(
        params,
        "services/app/guaranteeSlip/GuaranteeSlipDetail_Basics"
      ).then(rs => {
        if (rs.success) {
          Vue.set(val, "cheMsg", rs.result);
          // this.deData = rs.result
          console.log("cheMsg...............");
          console.log(val.cheMsg);
          // console.log(this.getDandetail)
        }
      });
    },
    // 批量修改dialog
    openDialog() {
      this.dialogShow = true;
    },
    // 导出
    exportSettle() {
      if (this.insuranceType) {
        var iType = this.insuranceType.split(",");
        console.log(iType);
      }
      this.daoloading = true;
      let params = {
        batchId: this.id,
        signBeginDate: this.signBeginDate,
        signEndDate: this.signEndDate,
        organizationUnitName: this.organizationUnitId,
        salesman: this.salesman,
        insuranceName: this.insuranceId,
        staffName: this.staffId,
        insuranceType: iType
      };
      this.post(params, "services/app/settle/ExportLowerSettlement").then(
        rs => {
          if (rs.success) {
            this.daoloading = false;
            if (rs.result.filePath) {
              console.log(rs);
              window.location.href = process.env.BASE_DOWN + rs.result.filePath;
            } else {
              this.$notify({
                title: "错误",
                message: rs.result.errorMessage,
                type: "error"
              });
            }
          } else {
            this.daoloading = false;
            this.$notify.error({
              title: "错误",
              message: rs.error.message
              // message: "导出无效"
            });
          }
        }
      );
    },
    // 文件操作
    handleRemove(file, fileList) {
      //   console.log(file, fileList);
      //   this.$notify({
      //        title: '成功',
      //        message: '删除成功',
      //        type: 'success'
      //     });
    },
    // 判断
    beforeAvatarUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isexcel = testmsg === "xls";
      const excel = testmsg === "xlsx";
      if (!isexcel && !excel) {
        this.$confirm("上传文件暂时只支持xlsx和xls格式", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          callback: action => {
            this.$emit("closeEditUpload");
          }
        });
      }
      return isexcel || excel;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制上传1个文件`);
    },
    beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleSuccess(res, file) {
      console.log(res);
      if (res.state == 1) {
        this.$notify.error({
          title: "错误",
          message: res.errorMessage
        });
      }
      this.filePath = res.filePath;
      //this.getList()
      console.log("upload---------------------------");
    },
    // 导入确定
    uploadBtn() {
      const _this = this;
      let file = _this.filePath;
      if (!file) {
        this.$notify.error({
          title: "错误",
          message: "请上传正确文件"
        });
      } else {
        this.okloading = true;
        let params = {
          batchId: this.id,
          filePath: this.filePath
        };
        console.log(params);
        this.post(params, "services/app/settle/ImportLowerSettlement").then(
          rs => {
            this.okloading = false;
            if (rs.success) {
              if (rs.result.state == 1) {
                this.$notify.error({
                  title: "错误",
                  message: rs.result.errorMessage
                });
              }
              if (rs.result.state == 0) {
                _this.dialogShow = false;
                _this.getList(_this.currentPage);
                _this.fileList = [];
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: rs.error.message
              });
            }
          }
        );
      }
    },
    // 设置表头
    fee() {
      return (
        <div class="setC">
          <p>车船税 / 含税保费</p>
          <p>不含税保费</p>
        </div>
      );
    },
    // tab切换
    changeTab(val) {
      this.now = val;
      this.currentPage = 1;
      if (val == 1) {
        this.queryType = 0;
      } else if (val == 2) {
        this.queryType = 1;
      } else if (val == 3) {
        this.queryType = 2;
      }
      this.getList();
    },
    // 开关切换
    switchtoggle(val) {
      console.log(val);
      const _this = this;
      if (this.tableData.length == 1 && this.currentPage != 1) {
        this.currentPage = this.currentPage - 1;
      }
      let params = {
        batchId: _this.id,
        id: val
      };
      this.post(params, "services/app/settle/UpdateLowerSettlementState").then(
        rs => {
          if (rs.success) {
            console.log(rs.result);
            this.getList(this.currentPage);
          }
        }
      );
    },
    // 表格信息
    getList(pageindex) {
      const _this = this;
      _this.loading = true;
      let params = {};
      if (pageindex) {
        params = {
          pageIndex: pageindex,
          batchId: _this.id,
          queryType: _this.queryType
        };
      } else {
        params = {
          batchId: _this.id,
          queryType: _this.queryType
        };
      }
      console.log("====================");
      console.log(params);
      this.post(params, "services/app/settle/LowerSettlementList").then(rs => {
        if (rs.success) {
          _this.loading = false;
          console.log(rs);
          if (rs.result.count == 0) {
            this.btnShow = false;
          } else {
            this.btnShow = true;
          }
          this.tableData = rs.result.items;
          this.pagetotal = rs.result.totalCount;
          this.count = rs.result.count;
          this.salesmanCount = rs.result.salesmanCount; //结算
          this.notSalesmanCount = rs.result.notSalesmanCount; //暂不
          this.premium = rs.result.premium; //保费
          this.actionPremium = rs.result.actionPremium; //实结保费
          this.expands = [];
        }
      });
    },
    // 信息详情
    getDetail(val) {
      console.log(val);
      let params = {
        guaranteeSlipId: val.guaranteeSlipId,
        // guaranteeSlipId :'352da0c4-fb42-4803-a327-2de31372ca70',
        batchId: this.id
      };
      //this.expandLoading = true;
      // console.log(params);
      this.post(params, "services/app/settle/LowerSettlementDetail").then(
        rs => {
          //this.expandLoading = false;
          if (rs.success) {
            console.log(rs);
            rs.result.tabShow = true;
            //val.expandData = rs.result;
            Vue.set(val, "expandData", rs.result);
            console.log(this.expandData);
            console.log("-----------------------------------expandData");
            // console.log(this.expandData);
          } else {
            this.$notify.error({
              title: "错误",
              message: rs.error.message,
              customClass: "el-notification-error"
            });
          }
        }
      );
    },
    // 编辑
    toEdit(obj) {
      // console.log(id);
      this.isshow = true;
      this.datas = {
        id: obj.guaranteeSlipId,
        cid: obj.id,
        batchId: obj.batchId
      };
      // console.log(this.datas);
    },
    // 保存
    tosave(data) {
      // console.log(data);
      // console.log('**********************************');
      const _this = this;
      _this.isshow = false;
      let params = {
        batchId: _this.id,
        id: data.cid,
        guaranteeSlipId: data.guaranteeSliId,
        aPoundageRatio: data.aPoundageRatio / 100,
        aPoundage: data.aPoundage,
        aVehicleAndVesselTaxRatio: data.aVehicleAndVesselTaxRatio / 100,
        aVehicleAndVesselTax: data.aVehicleAndVesselTax,
        aAdditionalRewardRatio: data.aAdditionalRewardRatio / 100,
        aAdditionalReward: data.aAdditionalReward,
        aRemark: data.aRemark,
        premiumType:data.premiumType
      };
      this.post(params, "services/app/settle/UpdateLowerSettlementDetail").then(
        rs => {
          if (rs.success) {
            if (rs.result.state == 0) {
              this.$notify({
                title: "成功",
                type: "success",
                message: "编辑成功",
                customClass: "el-notification-success"
              });
              _this.getList(_this.currentPage);
            } else {
              this.$notify.error({
                title: "错误",
                message: rs.result.errorMessage,
                customClass: "el-notification-error"
              });
            }
          }
        }
      );
    },
    closeLayer() {
      this.isshow = false;
    },
    //页码
    handleCurrentChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = val;
      this.getList(val);
    },
    // 政策批次
    toD(id) {
      let routeData = this.$router.resolve({
        name: "policylower3",
        query: {
          batchId: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    toA(id) {
      let routeData = this.$router.resolve({
        name: "policylower3",
        query: {
          batchId: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    toR(bid, pid) {
      let routeData = this.$router.resolve({
        name: "down_policydowninfo",
        query: {
          batchId: bid,
          policyId: pid,
          stream: 2,
          filterType: 1,
          status: 2
        }
      });
      window.open(routeData.href, "_blank");
    },
    toG(id) {
      let routeData = this.$router.resolve({
        name: "policydetail",
        params: {
          id: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 上一步
    toupstep() {
      const _this = this;
      this.$confirm(
        "返回上一步，该页面的操作将会重置，确定要返回上一步？"
      ).then(() => {
        _this.$router.push({
          name: "financedown"
        });
      });
    },
    // 结算信息
    tosettle() {
      const _this = this;
      this.dialogVisible = true;
      this.dialogLoading = true;
      let params = {
        id: this.id
      };
      this.post(
        params,
        "services/app/settle/GetLowerGuaranteeSlipTempStat"
      ).then(rs => {
        this.dialogLoading = false;
        if (rs.success) {
          _this.settleTableData = rs.result;
        }
      });
    },
    // 结算
    upsettle() {
      this.isokLoading = true;
      let params = {
        batchId: this.id
      };
      this.post(params, "services/app/settle/LowerSettlement").then(rs => {
        this.isokLoading = false;
        this.dialogVisible = false;
        if (rs.success) {
          console.log(rs.result);
          this.$router.push({
            name: "financedown3",
            query: {
              id: this.id
            }
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: rs.error.message,
            customClass: "el-notification-error"
          });
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
// 导出导入
.aniss{
  max-height: 320px;
  transition: all .3s ;
}
.upload1 {
  width: 300px;
  height: 90px;
  margin: 6px 0 6px 60px;
}
.fi{
	width: 95px !important;
}
.el-upload__tip {
  margin-top: 0;
}
.uploadBox {
  margin-left: 40px;
  font-size: 13px;
}
.upSapn1 {
  display: inline-block;
  margin-left: 60px;
  color: #999;
  font-size: 12px;
}
.box4 {
  text-align: center;
  margin-top: 20px;
}
.upBtn {
  width: 100px;
}

.setFont {
  font-size: 16px;
}
.setWd {
  width: 76%;
  display: inline-block;
}
.lineS:hover {
  color: #027dca !important;
  cursor: pointer;
  border-bottom: 1px solid #027dca;
}
.noDou:first-child {
  display: none;
}
.lineG {
  color: #027dca !important;
  cursor: pointer;
}
.setText {
  border-radius: 5px;
  border-color: #d9d9d9;
  height: 60px;
  width: 233px;
  padding: 5px;
}
textarea[class="setText"]::-webkit-input-placeholder {
  color: #cbcbcb;
  font-size: 13px;
}
.setR {
  color: #cf1322;
}
.wd100 {
  width: 100px;
}
.wd130 {
  width: 130px;
}
.setC {
  font-size: 12px;
  padding: 0;
  p {
    padding: 0;
    margin: 0;
    line-height: 18px;
    text-align: right;
  }
}
.app-container {
  .downStream2 {
    width: 100%;
    .down-lot {
      text-align: right;
      padding: 0 20px;
    }
    .down-top {
      margin-top: 55px;
      padding: 0 20px;
      margin-bottom: 50px;
    }
    .down-list {
      width: 100%;
      .list-tab {
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #cbcbcb;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
      .list-all {
        padding: 14px 20px;
        .all-search {
          display: inline-block;
        }
        .all-data {
          float: right;
          color: #666666;
          display: inline-block;
          span {
            font-size: 13px;
            .data-red {
              color: #cf1322;
            }
          }
        }
      }
      .list-all2 {
        height: 56px;
        box-sizing: border-box;
        padding: 14px 20px;
        .all-data2 {
          float: right;
          color: #666666;
          display: inline-block;
          line-height: 28px;
          span {
            font-size: 13px;
            .data-red {
              color: #cf1322;
            }
          }
        }
      }
      .list-table {
        padding: 0 20px;
        .item-content {
          span {
            font-size: 13px;
          }
        }
        .lf,
        .md {
          width: 35%;
          float: left;
          padding-right: 2%;
          .title1 {
            color: #40819e;
            font-size: 14px;
            line-height: 20px;
            margin: 14px 0;
          }
          p {
            margin: 10px 0;
            .firstSpan {
              display: inline-block;
              width: 67px;
              color: #999999;
              font-size: 13px;
              line-height: 18px;
            }
            span {
              color: #151515;
              font-size: 13px;
              line-height: 18px;
            }
          }
          .divP {
            margin: 10px 0;
            .firstSpan {
              display: inline-block;
              width: 67px;
              color: #999999;
              font-size: 13px;
              line-height: 18px;
              vertical-align: top;
            }
            span {
              color: #151515;
              font-size: 13px;
              line-height: 18px;
            }
          }
        }
        .md {
          padding-left: 4%;
          padding-right: 4%;
          width: 33%;
          border-right: 1px solid #cbcbcb;
          border-left: 1px solid #cbcbcb;
          p {
            .firstSpan {
              display: inline-block;
              width: 110px;
              color: #999999;
              font-size: 13px;
            }
          }
        }
        .rh {
          margin-left: 4%;
          width: 27%;
          float: left;
                      .changpai{
                                text-overflow: ellipsis;
                              white-space: nowrap;
                              width: 130px;
                              display: inline-block;
                              vertical-align: TOP;
                              overflow: hidden;
                        }
          .title1 {
            color: #40819e;
            font-size: 14px;
            line-height: 20px;
            margin: 14px 0;
          }
          p {
            margin: 10px 0;
            line-height: 18px;
            span:first-child {
              display: inline-block;
              width: 110px;
              color: #999999;
              font-size: 13px;
            }
            span {
              font-size: 13px !important;
              color: #151515;
            }
          }
        }
        .edspan1 {
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #39b96c;
          border-radius: 6px;
          color: #fff;
          font-size: 14px;
          text-align: center;
        }
        .edspan2 {
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #3c8cbd;
          border-radius: 6px;
          color: #fff;
          font-size: 14px;
          text-align: center;
        }
        .info-p1 {
          font-size: 13px;
          color: #333;
          line-height: 18px;
          margin: 0 0 3px 0;
          span:first-child {
            // display: inline-block;
            // text-overflow: ellipsis;
            // overflow: hidden;
            // width: 86%;
            // max-width: 180px;
            // white-space: nowrap;
          }
          span:nth-child(2) {
            display: inline-block;
          }
        }
        .info-p2 {
          font-size: 13px;
          color: #666;
          margin: 3px 0 0 0;
          line-height: 18px;
          display: inline-block;
        //   span:first-child {
        //     display: inline-block;
        //     min-width: 100px;
        //   }
        }
        .info-p3 {
          font-size: 13px;
          color: #666;
          margin: 3px 0 0 0;
          line-height: 18px;
        }
        a {
          color: #027dca;
        }
      }
      .list-page {
        margin: 55px 0 20px 0;
        text-align: right;
        padding: 0 20px;
      }
    }
    .down-btn {
      text-align: center;
      margin-bottom: 50px;
    }
    .settletable {
      border: 1px solid #efefef;
      text-align: right;
      width: 100%;
      margin-bottom: 20px;
      .setB {
        font-weight: 700;
      }
      td {
        border: 1px solid #efefef;
      }
    }
  }
}
</style>